<template>
  <view class="context">
    <view v-show="addresslength < 1" @click="goAdderss" class="address flex-b">
      <view class="flexC rightPos">
        <image class="position" mode="aspectFit" src="@/static/image/make/position.png"></image>
        <view v-show="!address.hasOwnProperty('id')" class="pleaseSelect">请点击选择地址</view>
        <view v-show="address.hasOwnProperty('id')" class="add_text">
          <view class="name">{{ address.name }}<text>{{ address.tel }}</text></view>
          <view>{{ address.address_title }} {{ address.address }}</view>
        </view>
      </view>
      <image mode="aspectFit" class="rightClick" src="@/static/image/make/rightClick.png"></image>
    </view>
    <view v-show="addresslength > 0" class="ckaddress">
      <view class="ckdz">服务地址：</view>
      <view class="ckdzxq">默认使用上一次的预约地址</view>
    </view>
    <view class="prompt">
      <view>订单状态显示“待核销”即为预约成功。
        <!-- 临近春节，服务力紧张，我们会尽量为您安排。如果不能准时服务，支持全额退款 -->
      </view>
      <view v-show="addresslength > 0"></view>
    </view>
    <view class="choice">
      <uv-input v-model="reservation_time" @tap="$refs.timePopup.open()" border="bottom" placeholder="服务者将在此时段内上门"
        readonly>
        <template v-slot:prefix>
          <view class="title required">上门时段</view>
        </template>
        <template v-slot:suffix>
          <image class="rightIcon" src="@/static/image/payment/arrow.png"></image>
        </template>
      </uv-input>
      <uv-input v-model="r_title" @tap="$refs.remarksPopup.open()" border="bottom" placeholder="请选择备注" readonly>
        <template v-slot:prefix>
          <view class="title">选择备注</view>
        </template>
        <template v-slot:suffix>
          <image class="rightIcon" src="@/static/image/payment/arrow.png"></image>
        </template>
      </uv-input>
      <uv-input v-model="remark" border="bottom" placeholder="请输入补充信息">
        <template v-slot:prefix>
          <view class="title">补充信息</view>
        </template>
      </uv-input>
    </view>
    <view class="bottom">
      <view class="commodity flex">
        <image :src="constData.orderItem[0].img_url"></image>
        <view class="commodity_text">
          <view class="flex-b commodity_title">
            <view class="text-over2">{{ constData.orderItem[0].title }}</view>
          </view>
          <view>服务1次</view>
        </view>
      </view>
      <view class="information">
        <view class="number flexC">
          <view>订单编号: <text>{{ constData.order_sn }}</text></view>
        </view>
        <view class="number flexC marginTop">
          <view>下单时间: <text>{{ constData.createtime }}</text></view>
        </view>
        <view class="number flexC marginTop">
          <view>支付方式: <text>{{ constData.pay_channel === 1 ? '微信' : constData.pay_channel === 2 ? '支付宝' :
            '抖音支付' }}</text></view>
        </view>
        <view class="price">
          <view class="price_item flex-b">
            <view>订单金额:</view>
            <view>￥{{ constData.payment_money }}</view>
          </view>
          <view class="actual flex-b marginTop">
            <view>实际付款：</view>
            <view>￥{{ constData.payment_money }}</view>
          </view>
        </view>
      </view>
    </view>
    <view @click="setBooking" class="mainBtn buttons">确定</view>
    <view class="tankuang">
      <uv-popup round="10" overlay="true" :closeOnClickOverlay="false" ref="successpopup">
        <view class="popup flexD-c">
          <text class="pay">预约成功</text>
          <text class="make">您的预约已提交至服务商，预约成功后请耐心等待并保持手机畅通哦~</text>
          <view @click.stop="getlogin(ckType)" class="btns">好的，我知道了</view>
        </view>
      </uv-popup>
    </view>
    <uv-popup round="25" mode="bottom" ref="timePopup" :safeAreaInsetBottom="false">
      <select-time :createTime="createTime" :is_use_limit="is_use_limit" @timeConfirm="timeConfirm" />
    </uv-popup>
    <uv-popup round="25" mode="bottom" ref="remarksPopup" :safeAreaInsetBottom="false">
      <remarks @remarksConfirm="remarksConfirm" title="选择备注" :list="remarkList" />
    </uv-popup>
  </view>
</template>
<script>
import selectTime from '@/components/selectTime/selectTime.vue'
import remarks from '@/components/remarks/remarks.vue'
import { getOrderDetails, remarksList, getReservation, distantance, getckReservation } from '@/api/home.js'
export default {
  components: {
    selectTime,
    remarks
  },
  data() {
    return {
      id: null,
      constData: {},
      address: {},
      remarkList: [],
      r_title: '',
      r_id: null,
      reservation_time: '',
      remark: '',
      code: '',
      orderid: "",
      ckType: null,
      addresslength: 0,
      createTime: null,
      is_use_limit: null
    }
  },
  onLoad(option) {
    this.id = option.id
    this.rderDetails(this.id)
    this.setRemarks()
    uni.$on('address', (adr) => {
      this.address = adr
    })
  },
  onUnload() {
    uni.$off('address')
  },
  methods: {
    setBooking() {
      if (this.addresslength > 0) {
        this.address.id = this.constData.address_id
      }
      if (!this.address.hasOwnProperty('id')) {
        this.$showToast('请选择服务地址')
        return false
      }
      if (!this.reservation_time) {
        this.$showToast('请选择服务时间')
        return false
      }
      distantance({
        address_id: this.address.id
      }).then(res => {
        if (res.code === 1) {
          const reservationParams = {
            id: this.id,
            reservation_time: this.reservation_time,
            r_id: this.r_id,
            remark: this.remark,
            address_id: this.address.id
          };
          const reservationMethod = this.ckType === 15 ? getckReservation : getReservation;
          reservationMethod(reservationParams).then(res => {
            if (res.code === 1) {
              this.$refs.successpopup.open();
            } else {
              uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false,
                success: function (res) { }
              });
            }
          });
        } else if (res.code === 0) {
          const self = this;
          uni.showModal({
            title: '提示',
            content: res.msg,
            showCancel: false,
            success: function (res) {
              if (res.confirm && res.confirm === true) {
                uni.redirectTo({ url: '/pages/orderDetails/orderDetails?id=' + self.id });
              }
            }
          });

        }
      })
    },
    getlogin(type) {
      if (type === 1 || type===22) {
        uni.redirectTo({ url: '/pages/orderDetails/orderDetails?id=' + this.orderid })
      } else {
        uni.redirectTo({ url: '/pages/ckorderDetails/ckorderDetails?id=' + this.orderid })
      }
    },
    remarksConfirm(param) {
      this.r_title = param.title
      this.r_id = param.id
      this.$refs.remarksPopup.close()
    },
    timeConfirm(param) {
      this.reservation_time = param
      this.$refs.timePopup.close()
    },
    goAdderss() {
      uni.navigateTo({
        url: '/pages/address/address?item=select'
      })
    },
    setRemarks() {
      remarksList().then(res => {
        if (res.code === 1) {
          this.remarkList = res.data
        }
      })
    },
    rderDetails(id) {
      getOrderDetails({
        id: id
      }).then(res => {
        if (res.code === 1) {
          this.constData = res.data
          this.orderid = res.data.order_id
          this.ckType = res.data.product_type
          this.createTime = res.data.createtime
          this.is_use_limit = res.data.goodInfo.is_use_limit
          if (this.ckType === 15) {
            this.addresslength = res.data.timesCardList.length
          }
        } else {
          this.$showToast(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import url('@/static/css/base.scss');

.context {
  padding: 30rpx 35rpx;
}

.buttons {
  margin-top: 60rpx;
}

.ckaddress {
  background-color: #FFFFFF;
  border-radius: 7px;
  padding: 56rpx 56rpx;
  display: flex;

  .ckdz {
    color: #1C2023;
    font-size: 28rpx;
    font-weight: bold;
  }

  .ckdzxq {
    font-size: 28rpx;
    font-weight: bold;
    color: red;
  }

}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 160rpx;
  padding: 0 100rpx;

  button {
    background-color: #edbd1d;
    color: #333;
    border-radius: 85rpx;
    border-color: #edbd1d;
    height: 85rpx;
    width: 100%;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 4rpx;

    &::after {
      content: none;
    }
  }
}

.bottom {
  margin-top: 30rpx;
  background-color: #FFFFFF;
  padding: 30rpx;
  border-radius: 20rpx;
}

.information {
  margin-top: 20rpx;
  color: #686868;
  font-size: 27rpx;

  .actual {
    color: #1C2023;
    font-weight: bold;

    view:nth-child(2) {
      color: #FF8104;
    }
  }

  .price {
    margin-top: 22rpx;
    padding-top: 15rpx;
    border-top: #E4E4E4 1rpx solid;

    .price_item {

      view:nth-child(1),
      view:nth-child(2) {
        color: #1C2023;
        font-weight: bold;
      }
    }
  }

  .marginTop {
    margin-top: 15rpx;
  }

  .number {
    image {
      width: 25rpx;
      height: 25rpx;
      margin-left: 10rpx;
    }

    text {
      color: #424242;
      padding-left: 20rpx;
    }
  }
}

.tankuang {
  .popup {
    width: 600rpx;

    .pay {
      font-size: 35rpx;
      font-weight: bold;
      margin-top: 20rpx;
      margin-bottom: 16rpx;
      letter-spacing: 6rpx;
    }

    .make {
      padding: 0 28px;
      font-size: 32rpx;
    }

    .btns {
      width: 360rpx;
      height: 76rpx;
      background: #ff8104;
      border-radius: 37rpx;
      font-weight: 400;
      color: #ffffff;
      font-size: 32rpx;
      text-align: center;
      margin-top: 36rpx;
      letter-spacing: 6rpx;
      line-height: 76rpx;
      margin-bottom: 60rpx;
    }
  }
}

.commodity {
  .number {
    image {
      width: 25rpx;
      height: 25rpx;
      margin-left: 10rpx;
    }

    text {
      color: #424242;
      padding-left: 20rpx;
    }
  }

  .commodity_text {
    flex: 1;
    color: #1C2023;

    view:nth-child(2) {
      font-weight: 300;
      font-size: 26rpx;
      margin-top: 15rpx;
    }

    view:nth-child(3) {
      font-weight: 400;
      font-size: 26rpx;
      margin-top: 25rpx;
    }

    .commodity_title {
      view:nth-child(1) {
        font-weight: bold;
        font-size: 29rpx;
        padding-right: 20rpx;
      }

      view:nth-child(2) {
        font-weight: bold;
        font-size: 23rpx;
      }
    }
  }

  image {
    width: 200rpx;
    height: 200rpx;
    margin-right: 33rpx;
  }
}

.prompt {
  display: flex;
  color: red;
  font-size: 24rpx;
  margin-top: 20rpx
}

.choice {
  background-color: #FFFFFF;
  border-radius: 15rpx;
  margin-top: 20rpx;
  padding: 30rpx 25rpx;
  display: flex;
  flex-direction: column;
  row-gap: 15rpx;

  .title {
    color: #1C2023;
    font-size: 28rpx;
    font-weight: bold;
    width: 150rpx;
  }

  .rightIcon {
    width: 20rpx;
    height: 20rpx;
  }
}

.address {
  background-color: #FFFFFF;
  border-radius: 15rpx;
  padding: 60rpx 30rpx;

  .rightPos {}

  .position {
    width: 50rpx;
    height: 50rpx;
    margin-right: 21rpx;
  }

  .rightClick {
    width: 30rpx;
    height: 30rpx;
  }

  .pleaseSelect {
    font-size: 30rpx;
    color: #767a82;
  }

  .add_text {
    font-size: 31rpx;
    color: #1C2023;
    width: calc(100% - 71rpx);

    .name {
      margin-bottom: 5rpx;

      text {
        color: #4E4E4E;
        font-size: 25rpx;
        padding-left: 30rpx;
      }
    }
  }
}
</style>